<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>observe</title>
</head>
<body>
  <div id="app">
    <!-- {{ person.name }} 相当于有两个取值行为：data.person、data.person.name -->
    <!-- 1、添加 person 的订阅 -->
    <!-- 2、递归的时候，添加 person.name 的订阅 -->
    <!-- 3、递归结束后，根据 person 对象创建childOb，childOb.dep 对应的订阅 -->
    <!--  -->
    {{ person.name }}

    <!-- 原始数据中没有 person.age，所以在Object.defineproperty中只会定义到 person 的 getter -->
    <!-- 首次使用数据时，也只会取到data.person -->
    <!-- 添加 person 的订阅，发现已经添加过__ob__；结束。 -->

    {{ person.age }}
    <!-- {{ arr }} -->
  </div>

  <script src="../../dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        person: {
            name: 'wangyi'
        },
        // arr: [2, 3, 5]
      }
    })

    // vm.arr.push(8)
    // vm.arr[0] = 100
    // vm.arr.length = 0

    vm.$set(vm.person, "age", "33333")
    
  </script>
</body>
</html>